
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>vue左侧弹出幻灯片</title>
    <script src="https://www.jq22.com/jquery/vue.min.js"></script>
    <style>
		/*219970838杨彪*/
      * {
        margin: 0px;
        padding: 0px;
      }
      .img-preview-box {
        height: 100vh;
        position: relative;
        perspective: 900px;
        background: #000;
      }
      .img-item {
        width: 400px;
        height: 260px;
        position: absolute;
        top: 50%;
        transform: translateY(-50%) rotateY(45deg);
        opacity: 0.8;
        transition: all 0.4s;
        cursor: pointer;
        z-index: 1;
        box-shadow: -5px 5px 20px 5px rgba(0, 0, 0, 0.2);
      }
      .cur-img {
        left: 800px !important;
        z-index: 2;
        opacity: 1;
        transform: translateY(-50%) rotateY(0) scale(1.5);
      }
      .img-title {
        color: #fff;
        font-size: 24px;
        font-weight: bold;
        position: absolute;
        bottom: 120px;
        left: 950px;
      }
      .arrow-icon-box {
        position: absolute;
        right: 100px;
        bottom: 60px;
        display: flex;
      }
      .arrow-icon {
        color: #999;
        border: 1px solid #999;
        margin-right: 5px;
        padding: 10px 20px;
        cursor: pointer;
        user-select: none;
      }
      .arrow-icon:hover {
        color: #fff;
        background-color: #999;
      }
      .text {
        color: rgb(221, 221, 221);
        font-size: 100px;
        font-weight: bold;
        text-align: center;
        opacity: 0.2;
        cursor: default;
      }
    </style>
  </head>

  <body>
    <div id="app">
      <div class="img-preview-box">
        <img
          class="img-item"
          :class="{ 'cur-img': curId === item.id }"
          :style="{ left: `${100 + 90 * item.id}px` }"
          :src="item.url"
          v-for="item in list"
          :key="item.id"
          @click="onPreview(item)"
        />
        <div class="img-title">{{ title }}</div>
        <div class="arrow-icon-box">
          <div class="arrow-icon" @click="onChange('reset')">RESET</div>
          <div class="arrow-icon" @click="onChange('last')">&lt; LAST</div>
          <div class="arrow-icon" @click="onChange('next')">NEXT &gt;</div>
        </div>
        <div class="text">PICTURE PREVIEW</div>
      </div>
    </div>
  </body>
  <script>
    var app = new Vue({
      el: "#app",
      data() {
        return {
          curId: 0,
          title: "",
          list: [
            { id: 1, url: "https://images.unsplash.com/photo-1671653687218-4b58c45d2e3e?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1470&q=80", title: "steep cliff" },
            { id: 2, url: "https://images.unsplash.com/photo-1672266908996-3f0f73c49954?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1529&q=80", title: "sunset glow" },
            { id: 3, url: "https://images.unsplash.com/photo-1670960058964-79063a8ecc91?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1469&q=80", title: "lake" },
          ],
        };
      },
      methods: {
        onPreview({ id, title }) {
          this.curId = id;
          this.title = title;
        },
        onChange(direction) {
          if (direction === "reset") {
            this.curId = 0;
          } else if (direction === "last") {
            // 上一张
            if (this.curId === 1 || this.curId === 0) {
              this.curId = 3;
            } else {
              this.curId -= 1;
            }
          } else {
            // 下一张
            if (this.curId === 3 || this.curId === 0) {
              this.curId = 1;
            } else {
              this.curId += 1;
            }
          }
          if (["last", "next"].includes(direction)) {
            this.title = this.list.filter(
              (item) => item.id === this.curId
            )[0].title;
          } else {
            this.title = "";
          }
        },
      },
    });
  </script>
</html>

